<template>
  <div>
    <h1>视频上传</h1>
    <div>
        <input type="file" @change="uploadVedioHandle">
        <button @click="cancelUploadVedioHandle">取消上传</button>
    </div>
    <div>
        <progress :value="value" max="100"></progress>
        <span v-if="flag">{{value}}%</span>
    </div>
    <div :style="{color:ys}">
        {{msg}}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            value:0,
            msg:'',
            ys:'',
            flag:false
        }
    },
    methods:{
        uploadVedioHandle(e){
            let file=e.target.files[0];
            let fd=new FormData()
            fd.append("file",file)
            this.flag=true
            axios({
                method:'POST',
                url:'http://www.zhaijizhe.cn:3005/upload/uploadFile',
                data:fd,
                headers:{
                    'Content-Type':'multipart/form-data'
                },
                onUploadProgress:(e)=>{
                   this.value=(e.progress*100).toFixed(2)
                },
                cancelToken:new axios.CancelToken(c=>{
                    console.log('c',c);
                    this.cancle=c
                })
            }).then(res=>{
               if(res.data.code){
                 this.msg=res.data.message
                 this.ys="springgreen"
               }
            }).catch(err=>{
                if(axios.isCancel(err)){
                    this.msg="视频上传被取消了"
                    this.ys="red"
                }
            })
        },
        cancelUploadVedioHandle(){
            if(this.cancle){
                this.cancle()
            }
        }
    }
}
</script>

<style>

</style>